<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox"/>
    <label for="toggle-all"></label>
    <input @keydown.enter="enterDown" v-model.trim="taskName" class="new-todo" placeholder="输入任务名称-回车确认" autofocus />
  </header>
</template>

<script>
export default {
    props:['list'],

  data() {
    return {
      taskName: "",
    };
  },
  methods: {
    //  当按下回车时子数据传向父
    // 父组件封装成对象后添加到组件中
    enterDown() {
        if(this.taskName.length===0){
            return alert("不能为空")
        }
        this.$emit('addTask',this.taskName)
        this.taskName=''
    },
  },
  computed:{
      isAll:{
        set(val){
          this.list.forEach(ele=>ele.isDone=val)
      },get(){
          if(this.list.length==0){
              return false
          }
          return this.list.length !== 0 && this.list.every(ele => ele.isDone === true)
      }
      }
    
  }
};
</script>